<script lang="ts" setup>
import { ref, watch } from 'vue';

import { IconifyIcon } from '@vben/icons';

import {
  Button,
  Col,
  Form,
  FormItem,
  Input,
  InputNumber,
  Row,
  Select,
  SelectOption,
  Switch,
} from 'ant-design-vue';

// Props
const props = defineProps<{
  capability?: any;
}>();

// Emits
const emit = defineEmits<{
  update: [data: any];
}>();

// 响应式数据
const formData = ref({
  events: [
    {
      name: '能力启用',
      code: 'capability_enabled',
      type: 'status_change',
      description: '能力被启用时触发',
      channel: 'capability_events',
    },
    {
      name: '能力禁用',
      code: 'capability_disabled',
      type: 'status_change',
      description: '能力被禁用时触发',
      channel: 'capability_events',
    },
  ],
  subscriptions: [
    {
      eventCode: 'capability_enabled',
      handler: 'handleCapabilityEnabled',
      priority: 'medium',
    },
  ],
  autoPublish: true,
  publishDelay: 0,
  enableFilter: false,
  filterCondition: '',
  persistEvents: false,
  retentionDays: 30,
  maxEvents: 1000,
  enableMonitoring: true,
  monitorInterval: 60,
});

// 监听props变化
watch(
  () => props.capability,
  (newCapability) => {
    if (newCapability?.eventSystem) {
      formData.value = {
        ...formData.value,
        ...newCapability.eventSystem,
      };
    }
  },
  { immediate: true },
);

// 方法
const handleFormChange = () => {
  emit('update', { eventSystem: formData.value });
};

const addEvent = () => {
  formData.value.events.push({
    name: '',
    code: '',
    type: 'custom',
    description: '',
    channel: '',
  });
  handleFormChange();
};

const removeEvent = (index: number) => {
  formData.value.events.splice(index, 1);
  handleFormChange();
};

const addSubscription = () => {
  formData.value.subscriptions.push({
    eventCode: '',
    handler: '',
    priority: 'medium',
  });
  handleFormChange();
};

const removeSubscription = (index: number) => {
  formData.value.subscriptions.splice(index, 1);
  handleFormChange();
};
</script>

<template>
  <div class="capability-event-system">
    <Form layout="vertical" :model="formData">
      <div class="event-system-section">
        <h4>事件系统配置</h4>
        <p class="section-desc">配置能力的事件发布和订阅机制</p>

        <!-- 事件定义 -->
        <div class="config-group">
          <h5>事件定义</h5>
          <div class="events-list">
            <div
              v-for="(event, index) in formData.events"
              :key="index"
              class="event-item"
            >
              <Row :gutter="16">
                <Col :span="6">
                  <Input
                    v-model:value="event.name"
                    placeholder="事件名称"
                    @change="handleFormChange"
                  />
                </Col>
                <Col :span="6">
                  <Input
                    v-model:value="event.code"
                    placeholder="事件代码"
                    @change="handleFormChange"
                  />
                </Col>
                <Col :span="6">
                  <Select
                    v-model:value="event.type"
                    placeholder="事件类型"
                    @change="handleFormChange"
                  >
                    <SelectOption value="create">创建</SelectOption>
                    <SelectOption value="update">更新</SelectOption>
                    <SelectOption value="delete">删除</SelectOption>
                    <SelectOption value="status_change">状态变更</SelectOption>
                    <SelectOption value="custom">自定义</SelectOption>
                  </Select>
                </Col>
                <Col :span="6">
                  <Button type="text" danger @click="removeEvent(index)">
                    删除
                  </Button>
                </Col>
              </Row>
              <Row :gutter="16" style="margin-top: 8px">
                <Col :span="12">
                  <Input
                    v-model:value="event.description"
                    placeholder="事件描述"
                    @change="handleFormChange"
                  />
                </Col>
                <Col :span="12">
                  <Input
                    v-model:value="event.channel"
                    placeholder="事件通道"
                    @change="handleFormChange"
                  />
                </Col>
              </Row>
            </div>
          </div>
          <Button
            type="dashed"
            @click="addEvent"
            style="width: 100%; margin-top: 16px"
          >
            <IconifyIcon icon="ant-design:plus-outlined" />
            添加事件
          </Button>
        </div>

        <!-- 事件订阅 -->
        <div class="config-group">
          <h5>事件订阅</h5>
          <div class="subscriptions-list">
            <div
              v-for="(subscription, index) in formData.subscriptions"
              :key="index"
              class="subscription-item"
            >
              <Row :gutter="16">
                <Col :span="6">
                  <Select
                    v-model:value="subscription.eventCode"
                    placeholder="订阅事件"
                    @change="handleFormChange"
                  >
                    <SelectOption
                      v-for="event in formData.events"
                      :key="event.code"
                      :value="event.code"
                    >
                      {{ event.name }}
                    </SelectOption>
                  </Select>
                </Col>
                <Col :span="6">
                  <Input
                    v-model:value="subscription.handler"
                    placeholder="处理函数"
                    @change="handleFormChange"
                  />
                </Col>
                <Col :span="6">
                  <Select
                    v-model:value="subscription.priority"
                    placeholder="优先级"
                    @change="handleFormChange"
                  >
                    <SelectOption value="high">高</SelectOption>
                    <SelectOption value="medium">中</SelectOption>
                    <SelectOption value="low">低</SelectOption>
                  </Select>
                </Col>
                <Col :span="6">
                  <Button type="text" danger @click="removeSubscription(index)">
                    删除
                  </Button>
                </Col>
              </Row>
            </div>
          </div>
          <Button
            type="dashed"
            @click="addSubscription"
            style="width: 100%; margin-top: 16px"
          >
            <IconifyIcon icon="ant-design:plus-outlined" />
            添加订阅
          </Button>
        </div>

        <!-- 事件发布 -->
        <div class="config-group">
          <h5>事件发布</h5>
          <Row :gutter="24">
            <Col :span="12">
              <FormItem label="自动发布" name="autoPublish">
                <Switch
                  v-model:checked="formData.autoPublish"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="发布延迟(秒)" name="publishDelay">
                <InputNumber
                  v-model:value="formData.publishDelay"
                  :min="0"
                  :max="60"
                  style="width: 100%"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
          </Row>
        </div>

        <!-- 事件过滤 -->
        <div class="config-group">
          <h5>事件过滤</h5>
          <Row :gutter="24">
            <Col :span="12">
              <FormItem label="启用过滤" name="enableFilter">
                <Switch
                  v-model:checked="formData.enableFilter"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="过滤条件" name="filterCondition">
                <Input
                  v-model:value="formData.filterCondition"
                  placeholder="请输入过滤条件"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
          </Row>
        </div>

        <!-- 事件持久化 -->
        <div class="config-group">
          <h5>事件持久化</h5>
          <Row :gutter="24">
            <Col :span="8">
              <FormItem label="持久化事件" name="persistEvents">
                <Switch
                  v-model:checked="formData.persistEvents"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="保留天数" name="retentionDays">
                <InputNumber
                  v-model:value="formData.retentionDays"
                  :min="1"
                  :max="365"
                  style="width: 100%"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
            <Col :span="8">
              <FormItem label="最大事件数" name="maxEvents">
                <InputNumber
                  v-model:value="formData.maxEvents"
                  :min="100"
                  :max="10000"
                  style="width: 100%"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
          </Row>
        </div>

        <!-- 事件监控 -->
        <div class="config-group">
          <h5>事件监控</h5>
          <Row :gutter="24">
            <Col :span="12">
              <FormItem label="启用监控" name="enableMonitoring">
                <Switch
                  v-model:checked="formData.enableMonitoring"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
            <Col :span="12">
              <FormItem label="监控间隔(秒)" name="monitorInterval">
                <InputNumber
                  v-model:value="formData.monitorInterval"
                  :min="1"
                  :max="300"
                  style="width: 100%"
                  @change="handleFormChange"
                />
              </FormItem>
            </Col>
          </Row>
        </div>
      </div>
    </Form>
  </div>
</template>

<style lang="less" scoped>
.capability-event-system {
  padding: 24px;

  .event-system-section {
    h4 {
      margin-bottom: 8px;
      color: #333;
      font-weight: 600;
    }

    .section-desc {
      margin-bottom: 24px;
      color: #666;
      font-size: 14px;
    }

    .config-group {
      margin-bottom: 32px;
      padding: 20px;
      border: 1px solid #f0f0f0;
      border-radius: 8px;
      background: #fafafa;

      h5 {
        margin-bottom: 16px;
        color: #333;
        font-weight: 600;
        font-size: 16px;
      }

      .events-list {
        .event-item {
          margin-bottom: 16px;
          padding: 16px;
          border: 1px solid #e8e8e8;
          border-radius: 6px;
          background: white;
        }
      }

      .subscriptions-list {
        .subscription-item {
          margin-bottom: 16px;
          padding: 16px;
          border: 1px solid #e8e8e8;
          border-radius: 6px;
          background: white;
        }
      }
    }
  }
}
</style>
